/**
 *为了保证页面的整齐，需要统一以下公共样式：
 *颜色，以color-开头，后面加颜色名；
 *字体大小，以font-size开头，后面加字号；
 *边距，一般不统一；
 *
 *项目中使用的颜色和字体大小，都要使用Base中定义的常量。
 */

 $theme: #2286ff; // 主题色

 /**************************颜色**************************/
 $color-white: #ffffff; // 白色
 $color-black: #4a4a4a; // 黑色
 $color-red: #b71c1c; //红色
 $color-green: #31985a; //绿色
 $color-blue: $theme; // 蓝色
 $color-orange: #ff8c00; //橙色
 $color-gray: #ddd; // 灰色
 $color-gray-light: #eee; // 浅灰
 $color-gray-dark: #ccc; // 深灰色
 $color-gray-tran: rgba(0, 0, 0, 0.2); //透明灰
 $color-gray-tran-dark: rgba(0, 0, 0, 0.5); //透明深灰
 
 /**************************字体大小**************************/
 $font-size: 14px; //默认大小
 $font-size-s: 12px; //小号字体
 $font-size-m: $font-size + 2px; //中号字体
 $font-size-l: 20px; //大号字体
 $font-size-ll: 24px; //加大号字体
 
 /**************************常用样式**************************/
 //居中
 .center {
   position: absolute;
   top: 50%;
   left: 50%;
   white-space: nowrap;
   transform: translate(-50%, -50%);
 }
 //垂直居中
 .center-column {
   position: absolute;
   top: 50%;
   white-space: nowrap;
   transform: translateY(-50%);
 }
 //超出部分省略号。注意：如果元素设置了title属性，当鼠标悬停时，会自动展示title。
 .ellipsis {
   display: block; //设置这个是为了兼容ie10
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 //透明背景
 .mask {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   z-index: 1000;
   background-color: $color-gray-tran;
   outline: 0;
   overflow: auto;
 }
 